<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>用户列表</title>
    <div th:replace="~{fragments/backend/head-base}"></div>
    <link type="text/css" rel="stylesheet" th:href="@{/plugins/jasny-bootstrap/css/jasny-bootstrap.min.css}"/>
    <link type="text/css" rel="stylesheet" th:href="@{/css/pages/gallery.css}"/>
</head>
<body class="body fixedNav_position fixedMenu_left">
<div class="preloader" style=" position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  backface-visibility: hidden;
  background: #ffffff;">
    <div class="preloader_img" style="width: 200px;
  height: 200px;
  position: absolute;
  left: 48%;
  top: 48%;
  background-position: center;
z-index: 999999">
        <img th:src="@{/img/loader.gif}" style=" width: 50px;" alt="loading...">
    </div>
</div>
<!--wrap-->
<div id="wrap">
    <div th:replace="~{fragments/backend/top :: top}"></div>
    <!-- /#top -->
    <div class="wrapper fixedNav_top">
        <div th:replace="~{fragments/backend/left :: left}"></div>
        <!-- /#left -->
        <div id="content" class="bg-container">
            <header class="head">
                <div class="main-bar">
                    <div class="row no-gutters">
                        <div class="col-6">
                            <h4 class="m-t-5">
                                <i class="fa fa-user"></i><span class="ml-1">用户列表</span>
                            </h4>
                        </div>
                    </div>
                </div>
            </header>
            <div class="outer">
                <div class="inner bg-container">
                    <!--app-->
                    <div id="">
                        <div class="row">
                            <div class="col-12">
                                <div class="float-left w-50" >
                                    <div class="input-group">
                                        <input type="search" id="keyword" name="keyword" value=""
                                               placeholder="输入 账号/用户名/手机号/邮箱 进行搜索" class="form-control"/>
                                        <span class="input-group-btn">
                                                    <button class="btn btn-primary" type="button"
                                                            onclick="clickPage(1)">
                                                    <span class="glyphicon glyphicon-search" aria-hidden="true">
                                                    </span><i class="fa fa-search"></i>
                                                    </button>
                                        </span>
                                        <span class="ml-3">
                                            <button class="btn  btn-secondary  "
                                                    @click="initUser()"
                                                    data-toggle="modal" data-href="#stack1" href="#stack1">
                                            <i class="fa fa-plus mr-1"></i><span >添加用户</span>
                                            </button>
                                        </span>
                                        <span class="ml-3">
                                            <button class="btn  btn-secondary  ">
                                            <i class="fa fa-plus mr-1"></i><span >导入用户</span>
                                            </button>
                                        </span>
                                        <span class="ml-3">
                                            <button class="btn  btn-secondary  ">
                                            <i class="fa fa-plus mr-1"></i><span >导出用户</span>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!--userList-->
                            <div class="col-12 mt-3">
                                <table class="table  table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">账号</th>
                                        <th class="text-center">头像</th>
                                        <th class="text-center">用户名</th>
                                        <th class="text-center">性别</th>
                                        <th class="text-center">学校</th>
                                        <th class="text-center">邮箱</th>
                                        <th class="text-center">电话</th>
                                        <th class="text-center">角色</th>
                                        <th class="text-center">状态</th>
                                        <th class="text-center">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(user,index) in userList">
                                        <td class="text-center">
                                            {{index + 1 + (pageNum-1) * 10}}
                                        </td>
                                        <td class="text-center">{{user.username}}</td>
                                        <td class="text-center">
                                                <img :src="user.avatar == null ? 'img/default_avatar.jpg' : user.avatar"
                                                     class="rounded-circle hidden-sm-down img-50"
                                                     alt="image not found">
                                        </td>


                                        <td class="text-center"><a class="primary-hover" target="_blank"
                                                                   :href="'/user/mainPage?userId='+user.id">{{user.name}}</a>
                                        </td>
                                        <td class="text-center">{{user.sex}}</td>
                                        <td class="text-center">{{user.school}}</td>
                                        <td class="text-center">{{user.email}}</td>
                                        <td class="text-center">{{user.phone}}</td>
                                        <td class="text-center">
                                                    <span v-for="(role,index) in user.roleList">
                                                       {{role.remark}}
                                                    </span>
                                        </td>
                                        <td class="text-center">
                                                <span v-if="user.flag == 0"><button
                                                        class="btn btn-sm btn-outline-success">正常</button></span>
                                            <span v-if="user.flag == 1"><button
                                                    class="btn btn-sm btn-outline-warning">已冻结</button></span>
                                            <span v-if="user.flag == 2"><button
                                                    class="btn btn-sm btn-outline-danger">已删除</button></span>
                                        </td>
                                        <td class="text-center">
                                            <button data-toggle="modal" data-href="#stack1" href="#stack1"
                                                    class="btn btn-sm btn-primary" @click="userDetail(user.id)">详情
                                            </button>
                                            <a @click="activeUser(user.id)">
                                                <button class="btn btn-sm btn-success">激活</button>
                                            </a>
                                            <a @click="lockUser(user.id)">
                                                <button class="btn btn-sm btn-warning">冻结</button>
                                            </a>
                                            <a @click="deleteUser(user.id)">
                                                <button class="btn btn-sm btn-danger">删除</button>
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--page-->
                                <div class="row mt-3">
                                    <div style="margin: 0 auto">
                                        <ul class="page" maxshowpageitem="5" pagelistcount="10" id="page"></ul>
                                    </div>
                                </div>
                                <!--#page-->
                            </div>
                            <!--#userList-->
                        </div>
                    </div>
                    <!--#app-->
                </div>
            </div>
        </div>
        <!-- /.inner -->
    </div>
    <!-- /.outer -->
    <!-- /#content -->
    <!-- Modal -->

    <div class="modal fade bs-example-modal-sm in display_none" id="stack1" tabindex="-1" role="dialog"
         aria-hidden="false">
        <div class="modal-dialog modal-lg" style="width: 1000px">
            <div class="modal-content">
                <div class="modal-header ">
                    <h4 class="modal-title "id="saveTitle" >添加用户</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <input type="hidden" v-model="user.id" name="id"/>
                        <table class="table ">
                            <tr>
                                <td>头像</td>
                                <td>
                                    <!--<input name="avatar" type="text" class="form-control"/>-->
                                    <div class="form-group">
                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                            <div class="fileinput-new thumb_zoom zoom admin_img_width">
                                                <img :src="user.avatar" alt="admin" class="admin_img_width">
                                            </div>
                                            <div class="fileinput-preview fileinput-exists thumb_zoom zoom admin_img_width"></div>
                                            <div class="btn_file_position">
                                                        <span class="btn btn-primary btn-file">
                                                            <span class="fileinput-new">选择图片</span>
                                                            <span class="fileinput-exists">更换</span>
                                                            <input type="file" id="file" name="file"/>
                                                        </span>
                                                <a href="#" id="clearFile" class="btn btn-warning fileinput-exists"
                                                   data-dismiss="fileinput">移除</a>
                                            </div>
                                        </div>
                                    </div>

                                </td>
                            </tr>
                            <tr>
                                <td><span class="text-danger">*</span>用户名</td>
                                <td><input name="username" type="text" v-model="user.username"  maxlength="20" class="form-control"/>
                                </td>
                                <td>密码</td>
                                <td><input name="password"  maxlength="20" minlength="6" id="password" placeholder="不修改无需填写" type="password"
                                           class="form-control"/></td>
                            </tr>
                            <tr>
                                <td><span class="text-danger">*</span>昵称</td>
                                <td><input name="name" v-model="user.name" type="text" maxlength="20" class="form-control"/></td>
                                <td><span class="text-danger">*</span>性别</td>
                                <td>
                                    <label class=" custom-control custom-radio">
                                        <input name="sex" type="radio" value="男" v-model="user.sex"
                                               class="custom-control-input" checked="checked">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">男</span>
                                    </label>
                                    <label class=" custom-control custom-radio">
                                        <input name="sex" type="radio" value="女" v-model="user.sex"
                                               class="custom-control-input">
                                        <span class="custom-control-indicator"></span>
                                        <span class="custom-control-description">女</span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="text-danger">*</span>角色</td>
                                <td>
                                    <select id="roleSelect" name="roleId" v-model="user.roleIds" class="form-control"
                                            style="width: 100px;">
                                        <option v-for="(role,index) in roleList" :value="role.id" >
                                            {{role.remark}}
                                        </option>
                                    </select>
                                </td>
                                <td><span class="text-danger">*</span>email</td>
                                <td><input name="email" v-model="user.email" type="text" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td>手机</td>
                                <td>
                                    <input name="phone" v-model="user.phone" maxlength="20" type="number" class="form-control"/>
                                </td>
                                <td>学校</td>
                                <td><input name="school" v-model="user.school" maxlength="20" type="text" class="form-control"/></td>
                            </tr>
                            <tr>
                                <td>心情</td>
                                <td colspan="3">
                                    <textarea style="height: 100px" v-model="user.mood" maxlength="255" name="mood"
                                              class="form-control"></textarea>
                                </td>
                            </tr>
                            <tr>

                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-secondary">取消</button>
                    <button type="button" id="saveUser" class="btn btn-info"
                            onclick="saveUser()">提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- # right side -->
</div>
<!-- /#wrap -->
<!-- global scripts-->
<div th:replace="~{fragments/backend/footer :: footer}"></div>
<!--end of global scripts-->
<!--  plugin scripts -->
<script type="text/javascript" th:src="@{/plugins/jasny-bootstrap/js/jasny-bootstrap.min.js}"></script>
<!--end of plugin scripts-->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/


    // vue
    var wrap = new Vue({
        el: '#wrap',
        data: {
            total: 0,
            pageNum: 1,
            user: {"sex": "男", "avatar": "http://file.gkuoj.com/image/default_avatar.jpg", "roleIds": "2"},
            userList: [],
            roleList: []
        },
        filters: {
            formatDate: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                var month = padDate(value.getMonth() + 1);
                var day = padDate(value.getDate());
                var hour = padDate(value.getHours());
                var minutes = padDate(value.getMinutes());
                var seconds = padDate(value.getSeconds());
                return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },
            formatYear: function (val) {
                var value = new Date(val);
                var year = value.getFullYear();
                return year;
            },
            formatNum: function (val) {
                //四舍五入
                return  parseFloat(val).toFixed(2);
            }
        },
        methods: {
            listUser: function (pageNum) {
                var keyword = $("#keyword").val();
                var url = '/backend/user/listUser2Page';

                this.$http.post(url, {
                    "pageNum": pageNum,
                    "keyword": keyword
                }, {emulateJSON: true}).then(function (res) {
                    this.total = res.data.data.total;
                    this.userList = res.data.data.list;
                    this.pageNum = pageNum;
                    $("#page").initPage(this.total, pageNum, clickPage);
                }), function (res) {
                    console.log(res.data.msg);
                }
            },
            listRole: function () {
                var url = '/backend/role/listRole';
                this.$http.post(url, {}, {emulateJSON: true}).then(function (res) {
                    this.roleList = res.data.data;
                }), function (res) {
                    console.log(res.data.msg);
                }
            }
        }
    });
    //初始化
    wrap.listUser(1);
    wrap.listRole();

    //分页点击方法
    function clickPage(pageNum) {
        wrap.listUser(pageNum);
    }

    //添加用户点击初始化
    function initUser() {
        $("#saveTitle").html("添加用户");
        $("#clearFile").click();
        $("#password").attr("placeholder","默认（gkuoj）");
        $("#password").val("");
        wrap.user = {"sex": "男", "avatar": "http://file.gkuoj.com/image/default_avatar.jpg", "roleIds": "2"};
    }


    function deleteUser(userId) {
        $.post("/backend/user/delete", {"userId": userId}, function (resp) {
            if (resp.status == 200) {
                $.message({
                    message: resp.msg,
                    type: 'success'
                });
                clickPage(1);
            } else {
                $.message({
                    message: resp.msg,
                    type: 'error'
                });
            }
        })
    }




    function checkField() {
        var user = wrap.user;
        if (user.username == null || user.username.trim().length == 0) {
            $.message({
                message: "用户名不能为空",
                type: 'warning'
            });
            return false;
        }
        if (user.name == null || user.name.trim().length == 0) {
            $.message({
                message: "昵称不能为空",
                type: 'warning'
            });
            return false;
        }
        if (user.sex == null || user.sex.trim().length == 0) {
            $.message({
                message: "性别不能为空",
                type: 'warning'
            });
            return false;
        }
        if (user.roleIds == null) {
            $.message({
                message: "角色不能为空",
                type: 'warning'
            });
            return false;
        }
        if (user.email == null || user.email.trim().length == 0) {
            $.message({
                message: "email不能为空",
                type: 'warning'
            });
            return false;
        }
        return true;
    }

    //添加-更新
    function saveUser() {
        // var user = $("#userForm").serialize();

        var formData = new FormData($("#userForm")[0]);

        if (!checkField()) {
            return;
        }
        $.ajax({
            url: '/backend/user/save',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (resp) {
                if (resp.status == 200) {
                    $.message({
                        message: resp.msg,
                        type: 'success'
                    });
                    $('#stack1').modal('hide');
                    $("#clearFile").click();
                    clickPage(1);
                } else {
                    $.message({
                        message: resp.msg,
                        type: 'error'
                    });
                }
            }
        });
    }

    //详情
    function userDetail(userId) {
        $("#clearFile").click();
        $("#saveTitle").html("更新用户");
        $("#password").attr("placeholder","不更新无需填写");
        $.post("/backend/user/get", {"userId": userId}, function (resp) {
            if (resp.status == 200) {
                wrap.user = resp.data;
            } else {
                $.message({
                    message: resp.msg,
                    type: 'error'
                });
            }
        })
    }

    // end of vue


    //select2
    $('.select2-role').select2({
        placeholder: '选择角色',
        theme: 'bootstrap4'
    });
    /*]]>*/


</script>

</body>

</html>
